<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省简称</title>
    <style>
    div{
        width:100px;
        height:100px;
        background: purple;
        text-align: center;
        line-height:100px;
        float:left;
        margin:10px;
        font-size:24px;
        transition:all .6s;
        border-radius:50%;
    }
    div:hover{
        color:red;
        font-size:30px;

    }
</style>
</head>
<body>

<script>
    var sheng = ["京","津","沪","渝","内蒙古","桂","藏","宁","新","港","澳","冀","晋","辽","吉","黑",
        "苏","浙","皖","闵","赣","鲁","豫","鄂","湘","粤","琼","川","贵","云","陕","甘","青","台"];
    for(var i=0;i<sheng.length;i++){
        document.write("<div>"+sheng[i]+"</div>");
    }
</script>
</body>
</html>